<template>
  <div class="card-box">
    <v-step></v-step>

    <div class="line-box"></div>
    <div class="wrap-box">
      <div class="img-box"><img src="./scan.png" class="logo" onclick="return false"/></div>
      <div class="title">点击扫描身份证</div>
      <input type="file" accept="image/*" capture="camera" class="file" @change="changePhoto($event)"/>
    </div>

    <div class="wrap-box write" @click="toPage">
      <div class="img-box"><img src="./write.png" class="logo" onclick="return false"/></div>
      <div class="title">忘带身份证，点击手动输入</div>
    </div>

    <div class="photo-warp" v-show="photoShow">
      <div class="photo-box">
        <img :src="photo" class="photo" onclick="return false"/>
      </div>
      <div class="discern">正在识别中</div>
    </div>
  </div>
</template>

<script>
  import flowStep from "../../components/flow"
  import {baseUrl} from "../../config/env"
  import {getBase64, getNowFormatDate} from "../../config/util"

  export default {
    data() {
      return {
        photo: "",
        photoShow: false,
        assessToken: "",
        userSign: "",
        virValue: ""
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("openid"));
      //获取assessToken
      this.axios.post(baseUrl + "/userbank/get_bank_access_token?sgin=" + this.userSign).then((res) => {
        let resultObj = res.data;
        this.assessToken = this.$decruption(resultObj.data);
        sessionStorage.setItem("access_token", this.assessToken);
      })
    },
    methods: {
      changePhoto(e) {//显示图片
        if (e.target.files.length > 0) {
          getBase64(e.target, (url) => {
            this.photo = 'data:image/png;base64,' + url;
            this.photoShow = true;
            setTimeout(() => {
              this.uploadPhoto();
            }, 50);
          })
        }
      },
      uploadPhoto() {//百度API识别
        let image = this.photo.split(",")[1];
        this.$vux.loading.show({
          text: '加载中',
        });
        this.virValue = getNowFormatDate(this.userSign);
        let data = {
          "image": image,
          "id_card_side": "front",
          "accessToken": this.assessToken,
          "virValue": this.$encruption(this.virValue)
        };

        this.axios.post(baseUrl + "/userbank/scan?sgin=" + this.userSign + "&type=1", data).then((res) => {
          let certInfo = res.data;
          this.photoShow = false;
          this.photo = "";
          this.$vux.loading.hide();

          if (certInfo.code == 0) {
            certInfo = certInfo.data;
            if (certInfo.name.words == "" && certInfo.IdCard.words == "") {
              this.$vux.toast.text("扫描失败，请重新扫描！", "middle");
              return;
            } else {
              let certName = certInfo.name.words;
              let certNo = certInfo.IdCard.words;
              sessionStorage.setItem("bank_user_name", certName);
              sessionStorage.setItem("identity_no", this.$encruption(certNo));
              this.$router.push("/identityWrite");
            }
          } else if (certInfo.code == 20055 || certInfo.code == 10000 || certInfo.code == 10002 || certInfo.code == 10004) {
            this.$vux.toast.text(certInfo.msg, "middle");
          } else {
            this.$vux.toast.text(certInfo.data.error_msg, "middle");
          }
        }).catch(() => {
          this.photoShow = false;
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      toPage() {
        this.$router.push("/identityWrite");
      }
    },
    components: {
      "v-step": flowStep
    }
  }
</script>

<style lang="stylus" scoped>
  .card-box
    width: 100%
    height: 100%
    overflow: hidden
    .line-box
      margin-top: 0.493rem
      height: 0.28rem
      background: rgba(242, 242, 242, 1)
    .wrap-box
      position: relative
      margin: 0 auto
      margin-top: 0.8rem
      width: 70.4%
      height: 3.613rem
      border: 0.027rem solid rgba(230, 230, 230, 1)
      border-radius: 0.227rem
      .img-box
        display: flex
        justify-content: center
        .logo
          margin-top: 0.667rem
          margin-bottom: 0.24rem
          width: 1.627rem
          height: 1.627rem
      .title
        text-align: center
        font-size: 0.427rem
        color: rgba(60, 175, 255, 1)
      .file
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 0.226666rem;
        background: #EEE;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
        z-index: 98;
    .write
      margin-top: 0.493rem
    .photo-warp
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      display: flex
      align-items: center
      justify-content: center
      background-color: rgba(0, 0, 0, 0.5)
      .photo-box
        width: 9.08rem
        height: 5.92rem
        background: rgba(255, 255, 255, 1)
        border-radius: 0.107rem
        .photo
          width: 100%
          height: 100%
      .discern
        position: fixed
        bottom: 0.48rem
        text-align: center
        margin: 0 auto
        width: 92.53%
        height: 1.333rem
        line-height: 1.333rem
        background: rgba(60, 175, 255, 1)
        border-radius: 0.107rem
        font-size: 0.48rem
        color: rgba(255, 255, 255, 1)
</style>


